<template>
  <dk-table ref="DkTableRef" :query="{ project: props.project }" :hide-buttons="['recycle']" :table-api="tableApi" :cache-table="!getDev()">
  </dk-table>
  <dk-dialog v-model="showDiy" title="页面DIY" width="1400px" top="5vh" :z-index="100" lock-scroll destroy-on-close @opened="onOpened">
    <dk-page-diy
      ref="diy"
      :loading="loading"
      right-aside-width="330px"
      left-aside-width="300px"
      type="min"
      style="height: 810px; overflow: hidden"
    >
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="danger" @click="diy.clear()">清除</el-button>
      <el-button type="warning" @click="diy.showDiyCloud('category_page')">模板中心</el-button>
    </dk-page-diy>
  </dk-dialog>
  <dk-dialog v-model="showProject" title="数据列表" width="1400px" top="5vh" :z-index="100" lock-scroll>
    <dk-table :table-api="'/gs_gold/admin.' + props.project" :query="{ cate_id: chooseItem.id }" :cache-table="!getDev()"></dk-table>
  </dk-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getDev } from '@/utils/auth'
import rules from '@/diy/rules'
import { setValueById } from '@/api/config'
import { saveDiyById } from '@/api/category'

defineOptions({
  name: 'DkCategoryTable'
})
const DkTableRef = ref()
const tableApi = '/gs_gold/admin.category'
const props = defineProps({
  project: {
    type: String,
    default: 'test'
  }
})
const loading = ref(true)
const showDiy = ref(false)
const showProject = ref(false)
const chooseItem: any = ref({})
const diy = ref()

onMounted(() => {
  DkTableRef.value.DkTable.onClickButton((event: string, data: any) => {
    if (event === 'diy') {
      // 弹出diy
      chooseItem.value = data.row
      showDiy.value = true
    } else if (event === 'tickets') {
      chooseItem.value = data.row
      showProject.value = true
    }
  })
})
const save = () => {
  const diyData = diy.value.get()
  saveDiyById(chooseItem.value.id, diyData).then((res) => {
    console.log(res)
  })
}
const onOpened = () => {
  for (const menu of [rules.common, rules.app, rules.my]) {
    diy.value.addMenu(menu)
    diy.value.addComponent(menu.list)
  }
  console.log('chooseItem', chooseItem.value)
  diy.value?.set(chooseItem.value.diy_data)
  loading.value = false
}
</script>
<style></style>
